<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<h2>用户登录</h2>
<div id="app">
    用户名：<input type="text" v-model="username">
    <br><br>
    密码：<input type="password" v-model="password">
    <br><br>
    <button v-on:click="login()">登录</button>
</div>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            username: "",
            password: ""
        },
        methods: {
            login: function () {
                let vm = this;
                // alert("用户名："+this.username+"\n密码："+this.password)
                //Content-Type:application/json, 请求数据为json字符串（body）
                axios.post("login2",{
                    username: vm.username,
                    password: vm.password
                }).then(function (resp) {
                    //获取响应体
                    let json = resp.data;
                    if(json.ok){
                        //业务操作成功,页面跳转
                        window.location.href = "home.html";
                    }else{
                        //业务操作失败,显示错误信息
                        alert("错误码: "+json.code+"\n错误信息: "+json.msg)
                    }
                }).catch(function (err) {
                    console.error(err)
                    console.error(JSON.stringify(err))
                })
            }
        }
    })
</script>
</body>
</html>